<template>
  <div class="large-screen-header flex items-center justify-between flex-wrap">
    <div class="left flex items-center">
      <span>水业公司安防系统监控平台</span>
    </div>
    <div class="right flex">
      <ul class="flex items-center">
        <li class="flex items-center" @click="onAdmin">
          <i class="ico"></i>
          <span>进入后台</span>
        </li>
        <li class="flex items-center">
          <i class="ico"></i>
          <span>{{ getUserInfo.realname }}</span>
        </li>
        <li class="flex items-center" @click="onLogout">
          <i class="ico"></i>
          <span>退出系统</span>
        </li>
      </ul>
      <div class="date-time-layer">
        <div class="flex items-center">
          <p>{{ timeTextValue }}</p>
          <p class="flex flex-wrap items-center">
            <span>Date</span>
            <span>{{ dateTextValue }}</span>
          </p>
        </div>
      </div>
    </div>
    <dv-decoration2 :dur="2" />
  </div>
</template>

<script>
import { onMounted, onUnmounted, ref, unref, computed, defineComponent, nextTick } from 'vue';
import { useGo, useRedo } from '/@/hooks/web/usePage';
import { useUserStore } from '/@/store/modules/user';
import { useGlobSetting } from '/@/hooks/setting';
import { getToken } from '/@/utils/auth';
import md5 from 'crypto-js/md5';
import { message } from 'ant-design-vue';
import alarmMusic from '/@/assets/mp3/alarm.mp3';
import moment from 'moment';
export default defineComponent({
  setup() {
    const go = useGo();

    let timer;

    const userStore = useUserStore();

    const glob = useGlobSetting();

    //  日期
    let dateTextValue = ref('');

    // 时间
    let timeTextValue = ref('');

    let socket = null;

    /**
     * 进入到管理页面
     */
    function onAdmin() {
      go('/dashboard/analysis');
    }

    const getUserInfo = computed(() => {
      const { realname = '' } = userStore.getUserInfo || {};
      return { realname };
    });

    /**
     * 退出系统
     */
    function onLogout() {
      userStore.confirmLoginOut();
    }

    function getDateTime() {
      dateTextValue.value = moment().format('YYYY.MM.DD');
      timeTextValue.value = moment().format('HH:mm:ss');
    }

    function initWebSocket() {
      let token = getToken();
      //将登录token生成一个短的标识
      let wsClientId = md5(token);
      let userId = unref(userStore.getUserInfo).id + '_' + wsClientId;
      let url = glob.domainUrl?.replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId;

      socket = new WebSocket(url);

      socket.onopen = function (event) {
        console.log('Connection established');
        setInterval(() => {
          socket.send(1);
        }, 1000 * 30);
      };

      socket.onmessage = function (event) {
        try {
          const receiveData = JSON.parse(event.data)
          console.log("receiveData:", receiveData);
          const { type, data } = receiveData
          switch (type) {
            case 1:
              message.warning({
                content: '警告：' + receiveData.message,
                duration: 10,
              });
              const alarmSound = new Audio(alarmMusic); // 报警声音文件的路径
              alarmSound.play();
              break;
            default:
              break;
          }
        } catch (error) {
          console.log("error:", error);
        }
      };
    }

    onMounted(() => {
      initWebSocket();
      getDateTime();
      if (timer) {
        clearInterval(timer);
      }
      timer = setInterval(() => {
        getDateTime();
      }, 1000);
    });

    onUnmounted(() => {
      if (socket) {
        socket.close();
      }
    });

    return {
      onAdmin,
      onLogout,
      dateTextValue,
      getUserInfo,
      timeTextValue,
      initWebSocket,
    };
  },
});
</script>

<style lang="less" scoped>
.large-screen-header {
  position: relative;
  width: 100%;
  height: 105px;
  padding: 0 53px;
  .left {
    position: relative;
    margin: 12px 0 0;
    &::before {
      content: '';
      display: block;
      width: 100px;
      height: 100px;
      margin: 0 8px 0 0;
      background: url('@/assets/images/logo-2.png') no-repeat;
      background-size: 100%;
    }
    span {
      line-height: 105px;
      font-family: '胡晓波男神体';
      font-size: 42px;
      color: #fff;
    }
  }
  .right {
    margin: 12px 0 0;
    ul {
      padding: 0;
      margin: 0;
      li {
        position: relative;
        margin: 0 35px 0 0;
        cursor: pointer;
        .ico {
          display: block;
          width: 23px;
          height: 23px;
          margin: 0 6px 0 0;
        }
        &::after {
          content: '';
          position: absolute;
          bottom: -6px;
          left: 0;
          right: 0;
          display: block;
          width: 118px;
          height: 2px;
        }
        &.active,
        &:hover {
          &::after {
            background: url('@/assets/images/img-22.png') no-repeat 100%;
          }
          span {
            color: #19fcde;
          }
        }
        &:first-child {
          &.active,
          &:hover {
            .ico {
              background: url('@/assets/images/img-23.png') no-repeat 100%;
            }
          }
          .ico {
            background: url('@/assets/images/img-30.png') no-repeat 100%;
          }
        }
        &:nth-child(2) {
          &.active,
          &:hover {
            .ico {
              background: url('@/assets/images/img-31.png') no-repeat 100%;
            }
          }
          .ico {
            background: url('@/assets/images/img-24.png') no-repeat 100%;
          }
        }
        &:last-child {
          &.active,
          &:hover {
            .ico {
              background: url('@/assets/images/img-32.png') no-repeat 100%;
            }
          }
          .ico {
            background: url('@/assets/images/img-25.png') no-repeat 100%;
          }
        }
        span {
          font-size: 20px;
          font-family: '思源黑体';
          color: #fff;
        }
      }
    }
    .date-time-layer {
      margin: 0 12px 0 0;
      font-family: 'Aldrich';
      p {
        margin: 0;
        color: #fff;
        &:first-child {
          margin: 0 10px 0 0;
          font-size: 42px;
        }
        &:last-child {
          flex-flow: column;
          span {
            display: block;
            width: 100%;
            padding: 0;
            margin: 0;
            &:first-child {
              font-size: 10.77px;
              color: #fff;
              height: 12.92px;
              line-height: 12.92px;
              opacity: 0.6;
            }
            &:last-child {
              height: 28px;
              line-height: 28px;
              font-family: 'Aldrich';
              font-size: 24px;
            }
          }
        }
      }
    }
  }
  .dv-decoration-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
  }
}
</style>